<template>
    <view>
        <view class="nav p-l-30 p-r-30 p-b-20 p-t-20">
            <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
                                   activeColor="#4cd964"></uni-segmented-control>
        </view>

        <uniSwipeAcion>
            <uni-transition mode-class="fade" :show="true" v-for="(item,index) in list" :key="index">
                <view class="list bs-b br-12" >
                    <uniSwipeAcionItem>
                        <view class="title">
                            <uni-tag :text="getLabelByValue(item.type)" type="primary" />
                            <text class="f-25" style="color: red;">￥{{item.money}}</text>
                        </view>
                        <view class="main">
                            <view class="desc"><text>申请时间:</text><text>{{parseTime(item.createTime)}}</text></view>
                            <view class="images" @click="previewImage(item.invoice)">
                                <view class="tit">发票</view>
                                <image class='images' mode="aspectFit" :src="item.invoice"></image>
                            </view>
                            <textShrink  :text="'流程发起人：'+startUserNickname" />
                            <textShrink  :text="'报销事由：'+item.reason" />
                        </view>
                        <view class="bgc-white p-b-20 p-r-20" v-if="current===0">
                            <view class="flex flex-fe">
                                <view class="w-100 lh-60 m-l-20 tac br-12 bgc-blue" @click="openModel(index,'bx')">报销
                                </view>
                                <view class="w-100 lh-60 m-l-20 tac br-12 bgc-red" @click="openModel(index,'bh')">驳回
                                </view>
                            </view>
                        </view>

                    </uniSwipeAcionItem>
                </view>
            </uni-transition>
        </uniSwipeAcion>


        <!-- 缺省 -->
        <pinapp-empty-page v-if="list.length===0"></pinapp-empty-page>

        <block v-if="list.length!==0">
            <view class="p-b-100">
                <uni-load-more :status="status"></uni-load-more>
            </view>
        </block>

        <!-- 报销弹窗 -->
        <view v-if="list.length>0">
            <uni-popup ref="popup1" type="bottom">
                <uni-popup-dialog style='width: 85vw;' type="info" message="成功消息" title='报销' :duration="2000"
                                  :before-close="true" @close="$refs.popup1.close()" @confirm="confirm('bx')">
                    <view class='w-100p'>
                        <uni-easyinput v-model="list[itemIndex].reason2" placeholder="审核备注" type="digit"></uni-easyinput>
                    </view>
                </uni-popup-dialog>
            </uni-popup>
        </view>


        <!-- 驳回弹窗 -->
        <view  v-if="list.length>0">
            <uni-popup ref="popup2" type="bottom">
                <uni-popup-dialog style='width: 85vw;' message="成功消息" title='是否驳回' :duration="2000" :before-close="true"
                                  @close="$refs.popup2.close()" @confirm="confirm('bh')">
                    <view class='w-100p'>
                        <uni-easyinput v-model="list[itemIndex].reason2" placeholder="审核备注" type="digit"></uni-easyinput>
                    </view>
                </uni-popup-dialog>
            </uni-popup>
        </view>


    </view>
</template>

<script>
import textShrink from '@/components/saber-textShrink/textShrink.vue'
import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
import pinappEmptyPage from "@/components/pinapp-empty-page/pinapp-empty-page.vue"
import uniSwipeAcion from '@/uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action'
import uniSwipeAcionItem from '@/uni_modules/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item'
import {approve, getBpmDetail, getMyDoneBpm, getMyToBpm, getOaDetail, reject} from "../../api/bpm/bpm";
import {parseTime} from "../../utils/ruoyi";
import {getDict} from "../../api/system/system";
export default {
    components: {
        textShrink,
        htzImageUpload,
        pinappEmptyPage,
        uniSwipeAcion,
        uniSwipeAcionItem
    },
    data() {
        return {
            token: uni.getStorageSync('token'),
            id: '',
            items: ['待办任务', '已办任务', '已驳回'],
            current: 0,
            params: {
                pageNo: 1,
                pageSize: 10,
                status: '',
                result: '',
            },
            businessKey: '',
            list: [],
            dictList: [],
            startUserNickname:'',
            total: 0,
            status: 'more',
            itemIndex: 0,
            form: {
                startTime: '',
                endTime: '',
                reason: '',
                type: '',
                money: '',
                invoice: '',
                processInstanceId: '',
                createTime: '',
            },
        }
    },
    onLoad() {
        this.getList()
        this.getDictList()
    },
    methods: {
        getDictList(){
            getDict().then(res => {
                this.dictList = res.data.list;
            });
        },
        getLabelByValue(value) {
            const typeMapping = {};
            this.dictList.forEach(item => {
                typeMapping[item.value] = item.label;
            });

            return typeMapping[value] || '未知类型';
        },
        previewImage(url) {
            uni.previewImage({
                urls: [url],
                current: url,
            });
        },
        parseTime,
        confirm(type) {
            if (type === 'bx'){
                approve({
                    id: this.list[this.itemIndex].taskId,
                    reason: this.list[this.itemIndex].reason2
                }).then(res => {
                    switch (type) {
                        case 'bx':
                            this.$refs.popup1.close()
                            break;
                        case 'bh':
                            this.$refs.popup2.close()
                            break;
                    }
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    })
                })
            }else {
                reject({
                    id: this.list[this.itemIndex].taskId,
                    reason: this.list[this.itemIndex].reason2
                }).then(res => {
                    switch (type) {
                        case 'bx':
                            this.$refs.popup1.close()
                            break;
                        case 'bh':
                            this.$refs.popup2.close()
                            break;
                    }
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    })
                })
            }

            this.list.splice(this.itemIndex,1)
        },
        openModel(index, type) {
            this.itemIndex = index
            switch (type) {
                case 'bx':
                    this.$refs.popup1.open('center')
                    break;
                case 'bh':
                    this.$refs.popup2.open('center')
                    break;
            }

        },
        imagesDelete(e) {

            this.list[this.itemIndex].images = e.tempFilePaths

        },

        zidingyiSuccess(e) {

            let res = JSON.parse(e.data)

            if (res.code === 200) {
                return {
                    success: true,
                    url: res.data.url
                }
            } else {

                return {
                    success: false,
                    url: ""
                }
            }

        },
        onClickItem(e) {
            if (this.current !== e.currentIndex) {
                this.current = e.currentIndex;
                this.list = []
                this.params.pageNo = 1
                this.getList()
            }
        },
        getList() {
            this.status = 'loading';

            let total = 0;  // 在函数作用域之外声明 total 变量

            const fetchBpmData = (resultValue, bpmRequestFn) => {
                this.params.result = resultValue;

                return bpmRequestFn(this.params).then(bpmRes => {
                    let list = bpmRes.data.list;
                    total = bpmRes.data.total;  // 更新 total 变量
                    console.log(list);

                    const promises = list.map(item => {
                        const id = item.id;
                        const idValue = item.processInstance.id;
                        this.startUserNickname = item.processInstance.startUserNickname;

                        return getBpmDetail(idValue).then(bpmDetailRes => {
                            this.businessKey = bpmDetailRes.data.businessKey;
                            return getOaDetail(this.businessKey).then(oaRes => {
                                const newForm = {
                                    taskId: id,
                                    ...oaRes.data
                                };
                                console.log(newForm);
                                this.list.push(newForm);
                            });
                        });
                    });

                    return Promise.all(promises);
                });
            };

            if (this.current === 0) {
                fetchBpmData(1, getMyToBpm).then(() => {
                    this.params.pageNo++;
                    if (this.list.length >= total) {  // 使用外部声明的 total
                        this.status = 'no-more';
                    } else {
                        this.status = 'more';
                    }
                });
            } else if (this.current === 1) {
                this.params.pageSize = 100;
                fetchBpmData(2, getMyDoneBpm).then(() => {
                    if (this.list.length >= total) {  // 使用外部声明的 total
                        this.status = 'no-more';
                    } else {
                        this.status = 'more';
                    }
                });
            } else {
                this.params.pageSize = 100;
                fetchBpmData(3, getMyDoneBpm).then(() => {
                    if (this.list.length >= total) {  // 使用外部声明的 total
                        this.status = 'no-more';
                    } else {
                        this.status = 'more';
                    }
                });
            }
        }
    },
    onReachBottom() {
        this.getList()
    }
}
</script>

<style lang="scss" scoped>
.nav {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: #fff;
}

.list {
  overflow: hidden;
  margin: 50upx 30upx;
  // box-shadow: 0 0 10upx 2upx rgba(0, 0, 0, .1);
  padding: 0 2upx 2upx 2upx;

  .title {
    height: 70upx;
    background-color: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20upx;
  }

  .main {
    background-color: white;
    padding: 25upx 25upx 20upx;

    .desc {
      line-height: 1.9;
      display: flex;
      justify-content: space-between;
    }

    .images {
      padding: 15upx 0;

      .tit {
        line-height: 2;
      }
    }
  }
}

.images /deep/ .htz-image-upload-Item{
  width: 120upx;
  height: 120upx;
}
</style>
